/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-01-12 09:35:49
 * @LastEditTime : 2023-02-24 13:45:38
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Modal\MoreModal\LabAsphalt.jsx
 * @Description  :
 */

import { Http } from '../../Api'
import { Descriptions } from 'antd'
import { useEffect, useState } from 'react'
import { useRequest } from 'ahooks'

// !!! 沥青拌合站模块
export const LabAsphalt = ({ data, className }) => {
    const [Data, setData] = useState()
    const { runAsync: getData } = useRequest(Http, { manual: true })
    useEffect(() => {
        getData({ url: data.api, path: [data.uuid] }).then(res => {
            setData(res)
        })
    }, [data, getData])
    const [dataInfoList] = useState([
        { firLine: '油石比', twoLine: 'asphaltAggregateRatioAct', thrLine: '', fourLine: 'asphaltAggregateRatioTheo' },
        { firLine: '沥青', twoLine: 'asphaltAct', thrLine: '', fourLine: 'asphaltTheo' },
        { firLine: '骨料1(kg)', twoLine: 'sand1Act', thrLine: 'sand1ActPct', fourLine: 'sand1Theo' },
        { firLine: '骨料2(kg)', twoLine: 'sand2Act', thrLine: 'sand2ActPct', fourLine: 'sand2Theo' },
        { firLine: '骨料3(kg)', twoLine: 'gravel1Act', thrLine: 'gravel1ActPct', fourLine: 'gravel1Theo' },
        { firLine: '骨料4(kg)', twoLine: 'gravel2Act', thrLine: 'gravel2ActPct', fourLine: 'gravel2Theo' },
        { firLine: '骨料5(kg)', twoLine: 'gravel3Act', thrLine: 'gravel3ActPct', fourLine: 'gravel3Theo' },
        { firLine: '骨料6(kg)', twoLine: 'gravel4Act', thrLine: 'gravel4ActPct', fourLine: 'gravel4Theo' },
        { firLine: '矿粉(kg)', twoLine: 'slagPowderAct', thrLine: 'slagPowderActPct', fourLine: 'slagPowderTheo' },
        { firLine: '水泥(kg)', twoLine: 'cement1Act', thrLine: 'cement1ActPct', fourLine: 'cement1Theo' },
        {
            firLine: '再生料(kg)',
            twoLine: 'recycledMaterialAct',
            thrLine: 'recycleMaterialActPct',
            fourLine: 'recycleMaterialTheo',
        },
    ])

    return (
        <div className="LabStressMachine">
            <Descriptions bordered style={{ marginBottom: 8 }}>
                <Descriptions.Item label="出料时间">{Data?.dischargingTime}</Descriptions.Item>
                <Descriptions.Item label="工程名">{Data?.engineeringName}</Descriptions.Item>
                <Descriptions.Item label="油石比">{Data?.asphaltAggregateRatioAct}</Descriptions.Item>
                <Descriptions.Item label="采集时间">{Data?.collectionTime}</Descriptions.Item>
                <Descriptions.Item label="搅拌时长">{Data?.mixingDuration}</Descriptions.Item>
                <Descriptions.Item label="施工地点">{Data?.constructionSite}</Descriptions.Item>
                <Descriptions.Item label="设备编号">{Data?.equipmentCode}</Descriptions.Item>
                <Descriptions.Item label="上传时间">{Data?.uploadTime} </Descriptions.Item>
                <Descriptions.Item label="施工用量">{Data?.asphaltAct} </Descriptions.Item>
            </Descriptions>
            <div className="ant-descriptions ant-descriptions-bordered" style={{ marginBottom: 8 }}>
                <div className="ant-descriptions-view">
                    <table>
                        <tbody>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>材料名称</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <th
                                        className="ant-descriptions-item-label"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{item.firLine}</span>
                                    </th>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>实际用量</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <td
                                        className="ant-descriptions-item-content"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{Data?.[item.twoLine]}</span>
                                    </td>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>材料百分比</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <td
                                        className="ant-descriptions-item-content"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{Data?.[item.thrLine]}</span>
                                    </td>
                                ))}
                            </tr>
                            <tr className="ant-descriptions-row">
                                <th className="ant-descriptions-item-label">
                                    <span>理论配合比</span>
                                </th>
                                {dataInfoList.map((item, index) => (
                                    <td
                                        className="ant-descriptions-item-content"
                                        style={{ padding: '16px' }}
                                        key={`DataInfoList${index}`}
                                    >
                                        <span>{Data?.[item.fourLine]}</span>
                                    </td>
                                ))}
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    )
}
